<script setup>
  //1.导入ajax请求封装包
  import { uniFetch } from '@/apis/uni-fetch.js'
  // 导入生命周期方法
  import { onMounted, ref } from 'vue'
  const userData = ref({})
  const taskInfo = ref({})
  onMounted(() => {
    // 1. 获取司机信息
    getInfo()

    // 2. 获取里程信息
    getTaskInfo()
  })

  async function getTaskInfo() {
    // /driver/users/taskReport
    let res = await uniFetch.get('/driver/users/taskReport', {
      year: '2024',
      month: '09', // 由于我的账号注册日期是7月，所以需要填写07，大家根据自己的注册日期来填写
    })

     // console.log('任务：', res)
    taskInfo.value = res.data.data
  }

  async function getInfo() {
    try {
      let res = await uniFetch.get('/driver/users')
      // ✨✨1. 由于使用的是ref来定义的响应式数据，所以必须使用.value来进行读取和赋值
      userData.value = res.data.data // 最终要的是响应报文体中的data属性的值
      // console.log(res.data)
    } catch (err) {
      uni.utils.toast('失败了')
      console.log(err)
    }
  }
</script>

<template>
  <view class="page-container">
    <view class="user-profile">
      <image class="avatar" :src="userData.avatar" mode=""></image>
      <text class="username">{{ userData.name }}</text>
      <text class="no">司机编号：{{ userData.number }}</text>
      <text class="mobile">手机号码：{{ userData.phone }}</text>
    </view>
    <view class="month-overview">
      <view class="title">我的任务</view>
      <view class="content">
        <view class="item">
          <text class="volumn">{{ taskInfo.taskAmounts }}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ taskInfo.completedAmounts }}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ taskInfo.transportMileage }}</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </view>
    <view class="entry-list">
      <uni-list :border="false">
        <uni-list-item
          to="/subpkg_user/truck/index"
          showArrow
          title="车辆信息"
        />
        <uni-list-item
          to="/subpkg_user/task/index"
          showArrow
          title="任务数据"
        />
        <uni-list-item
          to="/subpkg_user/settings/index"
          showArrow
          title="系统设置"
        />
      </uni-list>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
